<template>
  <div>
    <el-row :gutter="10" style="margin: 10px 0;" v-for="o in orderArr">
      <el-col :span="4">
        <img :src="o.imgURL" style="width: 200px;">
      </el-col>
      <el-col :span="20">
        <div style="width: 450px; position:relative;">
          <el-text type="primary" size="large">商品名称:{{o.id}}</el-text>
          <el-text type="primary" style="position: absolute;right:20px;">￥{{o.price}}</el-text>
          <el-text type="primary" size="default" style="display:block;">商品型号:{{o.id}}</el-text>
          <el-text type="primary" size="large" style="display:block;">物流编号:{{o.Logisticsid}}</el-text>
        </div>
          <el-button type="primary" @click="editMerchant(o.id)" style="margin: 0 0 0 200px;" v-if="o.state=='已确认收货'">确认收货</el-button>
          <el-button type="primary" @click="editMerchant(o.id)" style="margin: 0 0 0 200px;" v-else>追加评价</el-button>
          <el-button type="info" @click="deleteMerchant(o.id)" v-if="o.state!='已确认收货'">问题反馈</el-button>
          <el-button type="info" @click="deleteMerchant(o.id)" v-else>再来一单</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
//定义数组存储订单信息
import {ref} from "vue";
import {onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const orderArr = ref([])


//获取当前商户的id
const user = ref(getUser());
const userid = user.value.id;
//获取订单信息
const getOrder =()=>{
  axios.get(BASE_URL+'/order/User/selectOrderById/'+userid)
      .then((response)=>{
        if(response.data.state == 2002){
          orderArr.value = response.data.data;
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
onMounted(()=>{
  //获取订单信息
  getOrder()
})

const editMerchant = (id)=>{
  console.log("确认收货的id",id);
  axios.post(BASE_URL+'/order/User/updateOrderStatus/'+id)
      .then((response)=>{
        if(response.data.state == 2002){
          ElMessage.success(response.data.message);
          getOrder();
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
</script>


<style scoped>

</style>